<template>

  <!--  风险点调查表单-->
  <div class="page_monitor-add">
    <el-form
      ref="form"
      :rules="rules"
      label-position="right"
      :model="currentRow"
      label-suffix="："
      label-width="140px">
      <el-card class="paicha_view">
        <el-form-item label="管养单位" prop="deptTreeId" style="margin-top: 20px">
          <organization
            :disabled="isLook"
            v-model="currentRow.deptTreeId"
            placeholder="选择管养单位"
            @change="changeDept"
          ></organization>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="路线" prop="roadId">
              <el-select
                :disabled="isLook"
                :popper-append-to-body="false"
                v-model="currentRow.roadId"
                clearable
                filterable
                placeholder="选择路线"
                @change="changeRoad">
                <el-option
                  v-for="item in roadSelectList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="边坡位置" prop="positionName">
              <el-input v-model="positionName" disabled clearable placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="巡查人员" prop="userName">
              <el-input v-model="currentRow.userName" :disabled="isLook" clearable placeholder=""></el-input>
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="边坡" prop="slopeId">
              <el-select
                :popper-append-to-body="false"
                v-model="currentRow.slopeId"
                :disabled="isLook"
                filterable
                clearable
                placeholder="选择边坡" @change="changeSlope">
                <el-option
                  v-for="item in slopeSelectList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="起止桩号" prop="stoke">
              <el-input v-model="stoke" disabled clearable placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="巡查日期" prop="patrolTime">
              <el-date-picker
                style="width: 100%"
                v-model="currentRow.patrolTime"
                type="date"
                :disabled="isLook"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider><span style="font-size: 25px; color: #1990FE;">巡查内容</span></el-divider>
        <div style="width: 100%" class="contentBoxs">
          <el-form-item label="巡查结果" prop="maintenanceInspectionType">
            <el-radio-group size="small" v-model="currentRow.maintenanceInspectionType">
              <el-radio-button
                :disabled="isLook"
                v-for="option in autoCheckList"
                :key="option.code"
                :label="option.code">
                {{ option.name }}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="总体情况描述" prop="explanation" label-width="120px">
            <el-input
              type="textarea"
              :rows="2"
              :disabled="isLook"
              :autosize="{ minRows: 4, maxRows: 6 }"
              placeholder="（包括：病害情况、严重情况、异常情况）"
              style="width: 60%"
              v-model="currentRow.explanation">
            </el-input>
            </el-form-item>
            <el-form-item label="建议处置措施" prop="advice" label-width="120px">

                <el-input
                  type="textarea"
                  :rows="2"
                  :disabled="isLook"
                  :autosize="{ minRows: 4, maxRows: 6 }"
                  placeholder="（建议处置措施）"
                  style="width: 60%"
                  v-model="currentRow.advice">
              </el-input>
            </el-form-item>
          <el-form-item label="图片" prop="picList">
            <upload-img
              :disabled="isLook"
              v-model="currentRow.picList"
              :limit="9"
              :size-limit="4"
              ref="uploadPic"></upload-img>
          </el-form-item>
        </div>
      </el-card>
    </el-form>
  </div>
</template>

<script>
import {getTemplateContent, patrolAdd, patrolUpdate} from "@/services/model/form";
import ItemMixins from "../item.mixins";
import UploadImg from "@/components/upload-img";
import Organization from "@/components/organization-unit/all";
import Enums from '@/utils/enums'

export default {
  props: ['isLook'],
  components: {UploadImg, Organization},
  mixins: [ItemMixins,Enums],
  data() {
    return {
      rules: {
        deptTreeId: {required: true, message: "请选择管养单位"},
        roadId: {required: true, message: "请选择路线"},
        slopeId: {required: true, message: "请选择边坡"},
        patrolTime: {required: true, message: "请选择巡查时间"},
        userName: {required: true, message: "请输入巡查人"},
      },
      activeName: "坡体",
      positionName: '',
      stoke: '',
      currentRow: {
        maintenanceInspectionType: 0,
        yangHuType: 1,
        explanation:''
      },
      template: [],
      autoCheckList: [],
    };
  },
  computed: {
  },
  methods: {
    changeSlope(val) {
      let res = this.slopeSelectList.filter(x => x.id === val)
      this.positionName = res[0].positionName
      this.stoke = res[0].stoke
    },
    async getTemplate(row) {
      this.$set(this, "activeName", '坡体');
      if (row) {
        this.currentRow = row
        this.template = row.formList
        this.changeDept()
      } else {
        let res = await getTemplateContent({formType: 8});
        this.template = res.data;
        this.currentRow = {
          maintenanceInspectionType: 1,
          yangHuType: 1,
        }
        this.$set(this, "positionName", '');
        this.$set(this, "stoke", '');
      }
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },
    // 新增编辑提交数据
    async submitData() {
      this.currentRow.formJson = JSON.stringify(this.template);
      let action = this.currentRow.id ? patrolUpdate : patrolAdd
      let res = await action(this.currentRow);
      this.$emit("disableds",false)
      if (res.code === 200) {
        this.currentRow = {};
        this.$notify({
          type: "success",
          title: "提示",
          message: "添加成功",
        });
        this.$emit("submitClose");
      }
    },
    // 表单校验
    validatorForm() {
      return new Promise((resolve) => {
        this.$refs.form.validate((valid) => {
          if (valid && resolve) {
            this.$emit("disableds",true)
            this.submitData();

          }
        });
      });
    },
    //获取路线列表
    async changeDept() {
      let list = await this.getRoadListByDept(this.currentRow.deptTreeId);
      if (this.currentRow.roadId) {
        this.changeRoad()
      } else if (list.length > 0) {
        this.$set(this.currentRow, "roadId", list[0].id);
        this.changeRoad()
      } else {
        this.$set(this.currentRow, "roadId", "");
        this.$set(this.currentRow, "slopeId", "");
      }
    },
    //查询灾害点列表
    async changeRoad() {
      this.slopeSelectList = [];
      const {roadId, deptTreeId} = this.currentRow;
      let list = await this.getSelectSlopeList(deptTreeId, roadId)
      if (this.currentRow.slopeId) {
        let info = await this.getSlopeInfo(this.currentRow.slopeId)
        this.$set(this, "positionName", info.positionName);
        this.$set(this, "stoke", info.stoke);
      } else if (list.length > 0) {
        this.$set(this.currentRow, "slopeId", list[0].id);
        this.$set(this, "positionName", list[0].positionName);
        this.$set(this, "stoke", list[0].stoke);
      } else {
        this.$set(this.currentRow, "slopeId", "");
      }
    },
  },
  created() {
  },
  mounted() {
    // this.getTemplate()
    // 启用状态枚举
    this.queryDictList(["EnumAutoCheck"], ["autoCheckList"]);
  },
  activated() {
  },
};
</script>
<style lang="less" scoped>
  .hover_card {
    height: 100px;
    line-height: 90px;
    font-size: 20px;
    margin-top: 10px;
  }

  .page_monitor-add {
    margin: 0 auto;

    .page-title {
      margin-bottom: 20px;
      padding: 28px;
      font-size: 30px;
      line-height: 18px;
      text-align: center;
      color: #1990FE;
      font-weight: 600;
      border-radius: 20px;
      box-shadow: 0px 0px 4px #161616;
      margin-top: 10px;
    }

    /deep/ .el-tabs__item.is-active {
      font-size: 20px;
      border-radius: 5px;
      font-weight: 600;
      color: white;
      text-align: center;
      background-color: #1990FE;
    }

    /deep/ .el-tabs__content {
      height: 600px;
      overflow: auto;
    }

    /deep/ .el-tabs__item {
      font-size: 16px;
    }
  }

  .form_box {
    padding: 20px;
  }

  .s-white {
    color: #ffffff;
  }

  .el-steps--simple {
    margin-bottom: 20px;
  }

  .button-foot {
    margin-top: 10px;
    text-align: center;
    padding: 10px;

    .el-button {
      background: #1990FE;
      border: none;
    }
  }

  .paicha_view {
    overflow: auto;
    padding-top: 20px;
    height: 84vh;

    /deep/ .el-checkbox-button.is-checked .el-checkbox-button__inner {
      background-color: #1990FE;
      border-color: #1990FE
    }
    .el-tabs {
      padding-left: 40px;

      .el-tabs__active-bar {
        background: #1990FE;
      }

      .el-tabs__item {
        color: white;
      }

      .is-active {
        color: #1990FE;
      }

      .el-radio-button {
        span:hover {
          color: white;
          background: #1990FE;
        }
      }
    }

    .el-input--suffix .el-input__inner {
      color: #1990FE;
    }

    .el-card {
      box-shadow: 0px 0px 8px #757575;
      background: #ffffff;
      color: #1990FE;
      box-shadow: none;
      // font-size: 140%;
    }
  }

  .hover_card:hover {
    background: #1990FE !important;
    font-size: 210%;
    color: white !important;
    font-weight: 600;
  }

  // 设置单选框选中颜色
  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    background: #1990FE;
    border-color: #1990FE;
  }

  .paicha_view .el-card {
    border: 1px solid #1990FE !important;
  }

  .contentBoxs {
    width: 100%;
    height: 50vh;

    ::-webkit-scrollbar {
      width: 0px;
      height: 0px;

    }

    //滚动条的滑块
    ::-webkit-scrollbar-thumb {
      background-color: #1990FE;
      border-radius: 0px;

    }

    /deep/ .el-form-item__content {
      margin-left: 0px !important;
    }

    /deep/ .el-collapse .el-collapse-item__header {
      margin-right: 20px;
    }
  }
</style>
